<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表格组件 table - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>表格组件 🔥</h1>
<blockquote class="layui-elem-quote">
<p>表格组件 <code>table</code> 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<p>以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。</p>
<div>
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">综合演示 🔥</h3>
<pre class="layui-code" lay-options="{preview: 'iframe', id: 'table-demo-1', text: {preview: '综合演示 🔥'}, style: 'height: 506px;', layout: ['preview', 'code'], tools: ['full','window'], done: function(obj){
  setTimeout(function(){
    layer.tipsIndex = layer.tips(
      '点击该图标可最大化查看效果', 
      layui.$('#table-demo-1 .layui-icon-screen-full'), {
      tips: 4,
      time: 30*1000
    })
  });
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layer.close(layer.tipsIndex);
  }
}}">
  <textarea>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 组件综合演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/layui/2.8.6/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;"> 
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
    <button class="layui-btn layui-btn-sm" id="dropdownButton">
      下拉按钮 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
      重载测试 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
      <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
  </div>
</script>
<script type="text/html" id="cityTpl">
  <select id="demoCity1" class="layui-border" lay-ignore>
    <option value="浙江杭州">浙江杭州</option>
    <option value="江西南昌">江西南昌</option>
    <option value="湖北武汉">湖北武汉</option>
    <option value="湖南长沙">湖南长沙</option>
  </select>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">
      更多 
      <i class="layui-icon layui-icon-down"></i>
    </a>
  </div>
</script>  
<script src="https://cdn.staticfile.org/layui/2.8.6/layui.js"></script>
<script>
layui.use(['table', 'dropdown'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  
  // 创建渲染实例
  table.render({
    elem: '#test',
    url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    height: 'full-35', // 最大高度减去其他容器已占有的高度差
    css: [ // 重设当前表格样式
      '.layui-table-tool-temp{padding-right: 145px;}'
    ].join(''),
    cellMinWidth: 80,
    totalRow: true, // 开启合计行
    page: true,
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRowText: '合计：'},
      {field:'username', width:80, title: '用户'},
      {field:'email', title:'邮箱 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '邮箱', hide: 0, width:150, edit: 'text'},
      {field:'sex', width:80, title: '性别', sort: true},
      {field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
        // console.log(obj)
        // 处理该字段的导出数据
        var td = obj.td(this.field); // 获取当前 td
        return td.find('select').val();
      }},
      {field:'sign', title: '签名', edit: 'textarea', minWidth: 260, style: '-moz-box-align: start;', totalRow: '人物：<span class="layui-badge-rim">唐代：{{= d.TOTAL_ROW.era.tang }} </span> <span class="layui-badge-rim">宋代：{{= d.TOTAL_ROW.era.song }}</span> <span class="layui-badge-rim">现代：{{= d.TOTAL_ROW.era.xian }}</span>'},
      {field:'experience', width: 100, title: '积分', sort: true, totalRow: '{{= d.TOTAL_NUMS }} 😊'}, 
      {field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'},
      {field:'ip', title:'IP', width: 120},
      {field:'joinTime', title:'加入时间', width: 120},
      {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
    ]],
    done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
        data: [{
          id: 'add',
          title: '添加'
        },{
          id: 'update',
          title: '编辑'
        },{
          id: 'delete',
          title: '删除'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'update':
              if(data.length !== 1) return layer.msg('请选择一行');
              layer.open({
                title: '编辑',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'delete':
              if(data.length === 0){
                return layer.msg('请选择一行');
              }
              layer.msg('delete event');
            break;
          }
        }
      });
 
      // 重载测试
      dropdown.render({
        elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
        data: [{
          id: 'reload',
          title: '重载'
        },{
          id: 'reload-deep',
          title: '重载 - 参数叠加'
        },{
          id: 'reloadData',
          title: '仅重载数据'
        },{
          id: 'reloadData-deep',
          title: '仅重载数据 - 参数叠加'
        }],
        // 菜单被点击的事件
        click: function(obj){
          switch(obj.id){
            case 'reload':
              // 重载 - 默认（参数重置）
              table.reload('test', {
                where: {
                  abc: '123456',
                  //test: '新的 test2',
                  //token: '新的 token2'
                },
                /*
                cols: [[ // 重置表头
                  {type: 'checkbox', fixed: 'left'},
                  {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
                  {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
                  {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},
                  {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
                  {field:'joinTime', title:'加入时间', width:120}
                ]]
                */
              });
            break;
            case 'reload-deep':
              // 重载 - 深度（参数叠加）
              table.reload('test', {
                where: {
                  abc: 123,
                  test: '新的 test1'
                },
                //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                //cols: ins1.config.cols
              }, true);
            break;
            case 'reloadData':
              // 数据重载 - 参数重置
              table.reloadData('test', {
                where: {
                  abc: '123456',
                  //test: '新的 test2',
                  //token: '新的 token2'
                },
                scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                //url: '404',
                //page: {curr: 1, limit: 30} // 重新指向分页
              });
            break;
            case 'reloadData-deep':
              // 数据重载 - 参数叠加
              table.reloadData('test', {
                where: {
                  abc: 123,
                  test: '新的 test1'
                }
              }, true);
            break;
          }
          layer.msg('可观察 Network 请求参数的变化');
        }
      });
 
      // 行模式
      dropdown.render({
        elem: '#rowMode',
        data: [{
          id: 'default-row',
          title: '单行模式（默认）'
        },{
          id: 'multi-row',
          title: '多行模式'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'default-row':
              table.reload('test', {
                lineStyle: null // 恢复单行
              });
              layer.msg('已设为单行');
            break;
            case 'multi-row':
              table.reload('test', {
                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                lineStyle: 'height: 95px;' 
              });
              layer.msg('即通过设置 lineStyle 参数可开启多行');
            break;
          }
        }
      });
    },
    error: function(res, msg){
      console.log(res, msg)
    }
  });
  
  // 工具栏事件
  table.on('toolbar(test)', function(obj){
    var id = obj.config.id;
    var checkStatus = table.checkStatus(id);
    var othis = lay(this);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
      break;
      case 'getData':
        var getData = table.getData(id);
        console.log(getData);
        layer.alert(layui.util.escape(JSON.stringify(getData)));
      break;
      case 'LAYTABLE_TIPS':
        layer.alert('自定义工具栏图标按钮');
      break;
    };
  });
 
  // 触发单元格工具事件
  table.on('tool(test)', function(obj){ // 双击 toolDouble
    var data = obj.data; // 获得当前行数据
    // console.log(obj)
    if(obj.event === 'edit'){
      layer.open({
        title: '编辑 - id:'+ data.id,
        type: 1,
        area: ['80%','80%'],
        content: '<div style="padding: 16px;">自定义表单元素</div>'
      });
    } else if(obj.event === 'more'){
      // 更多 - 下拉菜单
      dropdown.render({
        elem: this, // 触发事件的 DOM 对象
        show: true, // 外部事件触发即显示
        data: [{
          title: '查看',
          id: 'detail'
        },{
          title: '删除',
          id: 'del'
        }],
        click: function(menudata){
          if(menudata.id === 'detail'){
            layer.msg('查看操作，当前行 ID:'+ data.id);
          } else if(menudata.id === 'del'){
            layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
              obj.del(); // 删除对应行（tr）的DOM结构
              layer.close(index);
              // 向服务端发送删除指令
            });
          } 
        },
        align: 'right', // 右对齐弹出
        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
      })
    }
  });
 
  // 触发表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
 
  // 触发表格单选框选择
  table.on('radio(test)', function(obj){
    console.log(obj)
  });
  
  // 行单击事件
  table.on('row(test)', function(obj){
    //console.log(obj);
    //layer.closeAll('tips');
  });
  // 行双击事件
  table.on('rowDouble(test)', function(obj){
    console.log(obj);
  });
 
  // 单元格编辑事件
  table.on('edit(test)', function(obj){
    var field = obj.field; // 得到字段
    var value = obj.value; // 得到修改后的值
    var data = obj.data; // 得到所在行所有键值
    // 值的校验
    if(field === 'email'){
      if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)){
        layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});
        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
      }
    }
    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
    // …
    layer.msg('编辑成功', {icon: 1});
    
    // 其他更新操作
    var update = {};
    update[field] = value;
    obj.update(update);
  });
});
</script>
</body>
</html>
  </textarea>
</pre>
<h3 id="demo-static" lay-toc="{level: 2}" class="ws-bold">静态表格</h3>
<p>静态表格是指内容已经存在于页面中的 <code>&lt;table class=&quot;layui-table&quot;&gt;</code> 元素，且可通过一些<em class="layui-text-em">特定属性</em>设定不同风格。</p>
<pre class="layui-code" lay-options="{preview: true, style: 'height: 335px; overflow: auto;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<p>默认风格:</p>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>行边框表格:</p>
<table class="layui-table" lay-skin="line">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>列边框表格:</p>
<table class="layui-table" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>无边框表格:</p>
<table class="layui-table" lay-skin="nob">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>小尺寸表格:</p>
<table class="layui-table" lay-size="sm">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>大尺寸表格:</p>
<table class="layui-table" lay-size="lg">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
  </tbody>
</table>
<p>开启偶数行背景色:</p>
<table class="layui-table" lay-even>
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
    <tr>
      <td>庄子</td>
      <td>华夏</td>
      <td>朴素而天下莫能与之争美</td>
    </tr>
  </tbody>
</table>
  </textarea>
</pre>
<h3 id="demo-auto-render" lay-toc="{level: 2}" class="ws-bold">模板配置渲染</h3>
<p>在上文「<a href="index.html#examples">综合演示</a>」中，是通过组件核心方法完成的渲染。除此，还可以在模板上直接配置相关属性，让其自动完成渲染。</p>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  layui.table.init(obj.container.children('table'));
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-init');
  }
}}">
  <textarea>
<table class="layui-table" lay-data="{height:315, url:'/static/2.8/json/table/user.json', page:true}" id="ID-table-demo-init">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
    </tr>
  </thead>
</table>
<!-- import layui -->
  </textarea>
</pre>
<h3 id="demo-init" lay-toc="{level: 2}" class="ws-bold">静态表格转换</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button class="layui-btn" lay-on="parseTable">转换为数据表格</button>
</div>
<table lay-filter="parse-table-demo">
  <thead>
    <tr>
      <th lay-data="{field:'name', width:150}">人物</th>
      <th lay-data="{field:'nation', width:150}">民族</th>
      <th lay-data="{field:'maxim', minWidth: 180}">格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>孔子</td>
      <td>华夏</td>
      <td>有朋至远方来，不亦乐乎</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏</td>
      <td>穷则独善其身，达则兼济天下</td>
    </tr>
    <tr>
      <td>庄子</td>
      <td>华夏</td>
      <td>朴素而天下莫能与之争美</td>
    </tr>
  </tbody>
</table>
<!-- import layui -->
<script>
layui.use(function(){
  var table = layui.table;
  var util = layui.util;
  // 事件
  util.on('lay-on', {
    parseTable: function(){
      // 转化静态表格
      table.init('parse-table-demo', {
        // height: ''
      });
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-data" lay-toc="{level: 2}" class="ws-bold">已知数据渲染</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], ID: 'ID-table-demo-data', tools: ['full'], done: function(obj){
  layui.table.resize(this.ID);
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize(this.ID);
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-data"></table>
<!-- import layui -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 已知数据渲染
  var inst = table.render({
    elem: '#ID-table-demo-data',
    cols: [[ //标题栏
      {field: 'id', title: 'ID', width: 80, sort: true},
      {field: 'username', title: '用户', width: 120},
      {field: 'sign', title: '签名', minWidth: 160},
      {field: 'sex', title: '性别', width: 80},
      {field: 'city', title: '城市', width: 100},
      {field: 'experience', title: '积分', width: 80, sort: true}
    ]],
    data: [{ // 赋值已知数据
      "id": "10001",
      "username": "张三1",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "116"
    }, {
      "id": "10002",
      "username": "张三2",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12",
      "LAY_CHECKED": true
    }, {
      "id": "10003",
      "username": "张三3",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "65"
    }, {
      "id": "10004",
      "username": "张三4",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "777"
    }, {
      "id": "10005",
      "username": "张三5",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "86"
    }, {
      "id": "10006",
      "username": "张三6",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "12"
    }, {
      "id": "10007",
      "username": "张三7",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "16"
    }, {
      "id": "10008",
      "username": "张三8",
      "sex": "男",
      "city": "浙江杭州",
      "sign": "人生恰似一场修行",
      "experience": "106"
    }],
    //skin: 'line', // 表格风格
    //even: true,
    page: true, // 是否显示分页
    limits: [5, 10, 15],
    limit: 5 // 每页默认显示的数量
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-templet" lay-toc="{level: 2, hot: true}" class="ws-bold">自定义模板</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-templet', done: function(obj){
  layui.table.resize(this.ID);
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize(this.ID);
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-templet"></table>
<script type="text/html" id="ID-table-demo-templet-user">
  <a href="index.html" target="_blank">{{= d.username }}</a>
</script>
<script type="text/html" id="ID-table-demo-templet-switch">
  <!-- 这里的 checked 的状态值判断仅作为演示 -->
  <input type="checkbox" name="status" value="{{= d.id }}" title="热|" lay-skin="switch" lay-filter="demo-templet-status" {{= d.id == 10001 ? "checked" : "" }}>
</script>
<script type="text/html" id="ID-table-demo-templet-other">
  <span class="layui-badge-rim" style="margin-right: 10px;">评分：{{= d.score }}</span>
  <span class="layui-badge-rim">职业：{{= d.classify }}</span>
  <!--
  <span class="layui-badge-rim">下标：{{= d.LAY_INDEX }}</span>
  <span class="layui-badge-rim">序号：{{= d.LAY_NUM }}</span>
  -->
</script>
<!-- import layui -->
<script>
layui.use(['table'], function(){
  var table = layui.table;
  var form = layui.form;
  
  // 创建渲染实例
  table.render({
    elem: '#ID-table-demo-templet',
    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    height: '315px',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      // 未自定义模板的普通列
      {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
      // 模板 - 选择器写法
      {field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'},
      // 模板 - 函数写法
      {field:'sex', width:60, title: '性别', templet: function(d){
        if(d.sex === '男'){
          return '<span style="color: blue">♂</span>';
        } else {
          return '<span style="color: pink">♀</span>';
        }
      }},
      // 模板 - 普通字符写法
      {field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>'},
      // 模板中可包含任意字段、任意内容（如表单等）
      {title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},
      {title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
    ]]
  });
  
  // 状态 - 开关操作
  form.on('switch(demo-templet-status)', function(obj){
    var id = this.value;
    var name = this.name;
    layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-css" lay-toc="{level: 2, hot: true}" class="ws-bold">自定义样式 <sup>2.7+</sup></h3>
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 538px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 自定义样式 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/layui/2.8.6/css/layui.css" rel="stylesheet">
  <style>
    /* 自定义样式  */
    .layui-table-testcss .layui-table-header,
    .layui-table-testcss thead tr{background-color: #F8FCF9; color: #16BAAA}
    .layui-form-testcss > div{margin-bottom: 6px;}
  </style>
</head>
<body>
  <div style="padding: 16px;"> 
    <table class="layui-hide" id="ID-table-demo-css"></table>
  </div>
  <script type="text/html" id="ID-table-demo-css-user">
    <ul>
      <li><strong>ID:</strong> {{= d.id }} </li>
      <li><strong>用户:</strong> {{= d.username }} </li>
      <li><strong>性别:</strong> {{= d.sex }} </li>
      <li><strong>城市:</strong> {{= d.city }} </li>
    </ul>
  </script>
  <script type="text/html" id="ID-table-demo-css-tool">
    <div class="layui-form layui-form-testcss">
      <div class="layui-input-wrap">
        <input name="AAA" value="{{= d.AAA || '' }}" lay-affix="clear" placeholder="表单 1" class="layui-input" >
      </div>
      <div class="layui-input-wrap">
        <input name="BBB" value="{{= d.BBB || '' }}" lay-affix="clear" placeholder="表单 2" class="layui-input" >
      </div>
      <div>
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-css-submit">确认</button>
      </div>
    </div>
  </script>
  <script src="https://cdn.staticfile.org/layui/2.8.6/layui.js"></script>
  <script>
  layui.use(['table'], function(){
    var table = layui.table;
    var form = layui.form;
    
    // 创建渲染实例
    table.render({
      elem: '#ID-table-demo-css',
      url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
      page: true,
      height: 'full-35',
      lineStyle: 'height: 151px;', // 定义表格的多行样式
      css: [ // 直接给当前表格主容器重置 css 样式
        '.layui-table-page{text-align: center;}' // 让分页栏居中
      ].join(''),
      className: 'layui-table-testcss', // 用于给表格主容器追加 css 类名
      cols: [[
        {field:'username', width:160, title: '用户', templet: '#ID-table-demo-css-user'},
        // 设置单元格样式
        {field:'sign', minWidth:100, title: '签名', style:'color: #000;'},
        {width:160, title: '操作', templet: '#ID-table-demo-css-tool'}
      ]]
    });
    // 表单提交
    form.on('submit(demo-css-submit)', function(data){
      var field = data.field; // 获取表单字段值
      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });
      // 此处可执行 Ajax 等操作
      // …
      return false; // 阻止默认 form 跳转
    });
    
  });
  </script>
</body>
</html>
  </textarea>
</pre>
<h3 id="demo-page" lay-toc="{level: 2}" class="ws-bold">自定义分页</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-page', done: function(obj){
  layui.table.resize(this.ID);
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize(this.ID);
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-page"></table>
<script type="text/html" id="ID-table-demo-page-pagebar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">底部按钮1</button>
    <button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>
  </div>
</script>
<!-- import layui -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 创建渲染实例
  table.render({
    elem: '#ID-table-demo-page',
    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
      //curr: 5, //设定初始在第 5 页
      groups: 1, //只显示 1 个连续页码
      first: false, //不显示首页
      last: false //不显示尾页
    },
    pagebar: '#ID-table-demo-page-pagebar', // 分页栏模板
    cols: [[
      {field:'id', width:80, title: 'ID', sort: true},
      {field:'username', width:80, title: '用户名'},
      {field:'sex', width:80, title: '性别', sort: true},
      {field:'city', width:80, title: '城市'},
      {field:'sign', title: '签名', minWidth: 150},
      {field:'experience', width:80, title: '积分', sort: true}
    ]]
  });
  // 底部分页栏事件
  table.on('pagebar(ID-table-demo-page)', function(obj){
    var eventValue = obj.event; // 获得按钮 lay-event 值
    layer.msg(eventValue);
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-search" lay-toc="{level: 2, hot: true}" class="ws-bold">外部搜索</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], ID: 'ID-table-demo-search', done: function(obj){
  obj.render();
  layui.table.resize(this.ID);
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize(this.ID);
  }
}}">
  <textarea>
<form class="layui-form layui-row layui-col-space16">
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-username"></i>
      </div>
      <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-date"></i>
      </div>
      <input type="text" name="C" readonly placeholder="Field C" class="layui-input demo-table-search-date">
    </div>
  </div>  
  <div class="layui-btn-container layui-col-xs12">
    <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
    <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
  </div>
</form>
<table class="layui-hide" id="ID-table-demo-search"></table>
<!-- import layui -->
<script>
layui.use(function(){
  var table = layui.table;
  var form = layui.form;
  var laydate = layui.laydate;
  // 创建表格实例
  table.render({
    elem: '#ID-table-demo-search',
    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    cols: [[
      {checkbox: true, fixed: true},
      {field:'id', title: 'ID', width:80, sort: true, fixed: true},
      {field:'username', title: '用户名', width:80},
      {field:'sex', title: '性别', width:80, sort: true},
      {field:'city', title: '城市', width:80},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分', sort: true, width:80}
    ]],
    page: true,
    height: 310
  });
  // 日期
  laydate.render({
    elem: '.demo-table-search-date'
  });
  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('ID-table-demo-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      where: field // 搜索的字段
    });
    layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
    return false; // 阻止默认 form 跳转
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-editable" lay-toc="{level: 2, hot: true}" class="ws-bold">编辑的权限控制 <sup>2.7+</sup></h3>
<p>以下演示一个根据返回数据中某个字段来判断是否开启该行的编辑，<em class="layui-text-em">单击对应行</em>可进入单元格编辑。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-editable"></table>
<!-- import layui -->
<script>
layui.use(function(){
  var table = layui.table;
  var util = layui.util;
  // 根据返回数据中某个字段来判断开启该行的编辑
  var editable = function(d){
    if(d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
  };
  // 创建表格实例
  table.render({
    elem: '#ID-table-demo-editable',
    url: '/static/2.8/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    //,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
    css: [
      // 对开启了编辑的单元格追加样式
      '.layui-table-view td[data-edit]{color: #16B777;}'
    ].join(''),
    cols: [[
      {checkbox: true, fixed: true},
      {field:'id', title: 'ID', width:80, sort: true, fixed: true},
      {field:'username', title: '用户名', width:80, edit: editable},
      {field:'sex', title: '性别', width:80, sort: true, edit: editable},
      {field:'city', title: '城市', width:80, edit: editable},
      {field:'sign', title: '签名', edit: editable},
      {field:'experience', title: '积分', sort: true, width:80, edit: editable}
    ]],
    height: 310
  });
  // 单元格编辑后的事件
  table.on('edit(ID-table-demo-editable)', function(obj){
    var field = obj.field; // 得到修改的字段
    var value = obj.value // 得到修改后的值
    var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
    var data = obj.data // 得到所在行所有键值
    var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
    
    // 值的校验
    if(value.replace(/\s/g, '') === ''){
      layer.tips('值不能为空', this, {tips: 1});
      return obj.reedit(); // 重新编辑 -- v2.8.0 新增
    }
    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
    // …
    
    // 显示 - 仅用于演示
    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-editmodes" lay-toc="{level: 2, hot: true}" class="ws-bold">实现多样化编辑</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-editmodes');
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-editmodes"></table>
<!-- 原生 select 模板（推荐） -->
<script type="text/html" id="TPL-select-primary">
  {{#  var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
  <select name="city" class="layui-border select-demo-primary" lay-ignore>
    <option value="">原生 select 框</option>
    {{#  layui.each(cityList, function(i, v){ }}
    <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
    {{#  }); }}
  </select> 
</script>
<!-- layui select 在 table 中使用（不推荐。因为当 select 出现在 table 底部时，可能会撑起多余高度） -->
<script type="text/html" id="TPL-select-city">
  {{#  var cityList = d.cityList || ["北京","上海","广州","城市-1"]; }}
  <select name="city" lay-filter="select-demo">
    <option value="">select 方式</option>
    {{#  layui.each(cityList, function(i, v){ }}
    <option value="{{= v }}" {{= v === d.city ? 'selected' : '' }}>{{= v }}</option>
    {{#  }); }}
  </select> 
</script>
<!-- 推荐 -->
<script type="text/html" id="TPL-dropdpwn-demo">
  <button class="layui-btn layui-btn-primary dropdpwn-demo">
    <span>{{= d.sex || '保密' }}</span>
    <i class="layui-icon layui-icon-down layui-font-12"></i>
  </button>
</script>
<!-- laydate -->
<script type="text/html" id="TPL-laydate-demo">
  <input class="layui-input laydate-demo" placeholder="选择日期" value="{{= d.fieldname3 || '' }}">
</script>
<!-- colorpicker -->
<script type="text/html" id="TPL-colorpicker-demo">
  {{#  var color = d.color || ['#16baaa','#16b777','#1E9FFF','#FF5722','#FFB800','#393D49'][Math.round(Math.random()*5)]; }}
  <div class="colorpicker-demo" lay-options="{color: '{{= color }}'}"></div>
</script>
<!-- import layui -->
<script>
layui.use(function(){
  var $ = layui.$;
  var table = layui.table;
  var form = layui.form;
  var dropdown = layui.dropdown;
  var laydate = layui.laydate;
  var colorpicker = layui.colorpicker;
  
  // 渲染
  table.render({
    elem: '#ID-table-demo-editmodes',
    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    css: [ // 设置单元格样式
      // 取消默认的溢出隐藏，并设置适当高度
      '.layui-table-cell{height: 50px; line-height: 40px; overflow: visible;}',
      '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
      '.layui-table-cell select{height: 36px; padding: 0 5px;}'
    ].join(''),
    cols: [[ // 表头
      {field: 'id', title: 'ID', width:80, align: 'center', fixed: 'left'},
      {field: 'city', title: '原生 select', width:150, templet: '#TPL-select-primary'}, 
      //{field: 'city', title: 'layui select', width:150, templet: '#TPL-select-city'}, 
      {field: 'sex', title: 'dropdown', width:115, align: 'center', templet: '#TPL-dropdpwn-demo'}, 
      {field: 'date', title: 'laydate', width:150, templet: '#TPL-laydate-demo'}, 
      {field: 'color', title: 'colorpicker', width:100, align: 'center', templet: '#TPL-colorpicker-demo'},
      {field: 'sign', title: '文本', edit: 'textarea'}
    ]],
    done: function(res, curr, count){
      var options = this;
      
      // 获取当前行数据
      table.getRowData = function(elem){
        var index = $(elem).closest('tr').data('index');
        return table.cache[options.id][index] || {};
      };
      
      // 原生 select 事件
      $('.select-demo-primary').on('change', function(){
        var value = this.value; // 获取选中项 value
        var data = table.getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
        // 更新数据中对应的字段
        data.city = value;
        // 显示 - 仅用于演示
        layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
      });
      
      // layui form select 事件
      form.on('select(select-demo)', function(obj){
        console.log(obj); // 获取选中项数据
        
        // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
        var data = table.getRowData(obj.elem);
        // 更新数据中对应的字段
        data.city = value;
        console.log(data);
      });
      
      // dropdown 方式的下拉选择
      dropdown.render({
        elem: '.dropdpwn-demo',
        // trigger: 'hover',
        // 此处的 data 值，可根据 done 返回的 res 遍历来赋值
        data: [{
          title: '男',
          id: 100
        },{
          title: '女',
          id: 101
        },{
          title: '保密',
          id: 102
        }],
        click: function(obj){
          var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
          
          this.elem.find('span').html(obj.title);
          // 更新数据中对应的字段
          data.sex = obj.title;
          // 显示 - 仅用于演示
          layer.msg('选中值: '+ obj.title +'<br>当前行数据：'+ JSON.stringify(data));
        }
      });
      
      // laydate
      laydate.render({
        elem: '.laydate-demo',
        done: function(value, date, endDate){
          var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
          // 更新数据中对应的字段
          data.date = value;
          
          // 显示 - 仅用于演示
          layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
        }
      });
      
      // colorpicker
      colorpicker.render({
        elem: '.colorpicker-demo',
        done: function(value){
          var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
          // 更新数据中对应的字段
          data.color = value;
          
          // 显示 - 仅用于演示
          layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
        }
      });
      
      // 单元格普通编辑事件
      table.on('edit(ID-table-demo-editmodes)', function(obj){
        var value = obj.value // 得到修改后的值
        var data = obj.data // 得到所在行所有键值
        var field = obj.field; // 得到字段
        
        // 更新数据中对应的字段
        var update = {};
        update[field] = value;
        obj.update(update);
        
        // 编辑后续操作，如提交更新请求，以完成真实的数据更新
        // …
        
        // 显示 - 仅用于演示
        layer.msg('编辑值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
      });
      
      // 更多编辑方式……
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-parse" lay-toc="{level: 2, hot: true}" class="ws-bold">转换数据格式</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-parse');
  }
}}">
  <textarea>
<blockquote class="layui-elem-quote">
<p>假设这是一段数据源：<a href="../../../static/2.8/json/table/demo3.json" target="_blank">/static/2.8/json/table/demo3.json</a><br>
尽管它并不符合 table 组件默认规定的数据格式（<a href="index.html#options-async-data">#详见</a>），但可以通过 parseData 回调将其进行转换。</p>
</blockquote class="layui-elem-quote">
<table class="layui-hide" id="ID-table-demo-parse"></table>
<!-- import layui -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染
  table.render({
    elem: '#ID-table-demo-parse',
    url:'/static/2.8/json/table/demo3.json',
    page: true,
    response: {
      statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
    },
    // 将原始数据解析成 table 组件所规定的数据格式
    parseData: function(res){
      return {
        "code": res.status, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows.item //解析数据列表
      };
    },
    cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
      {field:'username', title:'用户名', width:120},
      {field:'email', title:'邮箱', width:150},
      {field:'experience', title:'积分', width:100, sort: true},
      {field:'sex', title:'性别', width:80, sort: true},
      {field:'sign', title:'签名'},
      {field:'joinTime', title:'加入时间', width:120}
    ]],
    height: 315
  });
});
</script>

  </textarea>
</pre>
<h3 id="demo-filter" lay-toc="{level: 2}" class="ws-bold">筛选列记忆功能</h3>
<p>即点击当前表格右上角筛选图标后，对表头进行显示隐藏勾选，再刷新页面依然保留当前筛选状态。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-filter');
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-filter"></table>
<!-- import layui -->
<script>
layui.use(function(){
  var $ = layui.$;
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#ID-table-demo-filter',
    url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    toolbar: 'default',
    height: 315,
    cols: [function(){
      var arr = [
        {field:'id', title:'ID', width:80, fixed: 'left'},
        {field:'username', title:'用户', width:120},
        {field:'sex', title:'性别'},
        {field:'city', title:'城市'},
        {field:'sign', title:'签名'},
        {field:'classify', title:'职业'}
      ];
      
      // 初始化筛选状态
      var local = layui.data('table-filter-test'); // 获取对应的本地记录
      layui.each(arr, function(index, item){
        if(item.field in local){
          item.hide = local[item.field];
        }
      });
      return arr;
    }() ],  
    done: function(){
      // 记录筛选状态
      var that = this;
      that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function(){
        var input = $(this).prev()[0];
        // 此处表名可任意定义
        layui.data('table-filter-test', {
          key: input.name
          ,value: input.checked
        })
      });
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-setRowChecked" lay-toc="{level: 2, hot: true}" class="ws-bold">选中行操作</h3>
<p>点击行任意处，通过行事件中执行相关选中方法，实现对整行的状态选中。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-setRowChecked');
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-demo-setRowChecked"></table>
<script type="text/html" id="demo-toolbar-setRowChecked">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
  </div>
</script>
<!-- import layui -->
<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染
  table.render({
    elem: '#ID-table-demo-setRowChecked',
    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    cols: [[
      {type: 'radio', fixed: 'left'},
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true},
      {field:'username', title:'用户', width:120},
      {field:'sex', title:'性别', width:80},
      {field:'city', title:'城市', width:100},
      {field:'sign', title:'签名'},
      {field:'experience', title:'积分', width:80, sort: true}
    ]],
    toolbar: '#demo-toolbar-setRowChecked',
    initSort: { // 设置初始排序
      field: 'experience', // 字段名
      type: 'desc' // 倒序
    },
    height: 366
  });
  
  // 行单击事件( 双击事件为: rowDouble )
  table.on('row(ID-table-demo-setRowChecked)', function(obj){
    var data = obj.data; // 获取当前行数据
    
    // 显示 - 仅用于演示
    layer.msg('当前行数据：<br>'+ JSON.stringify(data), {
      offset: '65px'
    });
    // 标注当前点击行的选中状态
    obj.setRowChecked({
      type: 'radio' // 单选模式
    });
  });
  // 头工具栏事件
  table.on('toolbar(ID-table-demo-setRowChecked)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;  // 获取选中行数据
        layer.alert(JSON.stringify(data));  // 显示 - 仅用于演示
      break;
    };
  });
});
</script>
  </textarea>
</pre>
<h3 id="demo-theads" lay-toc="{level: 2}" class="ws-bold">多级表头</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  layui.table.init(obj.container.children('table'));
}, toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-demo-theads-1');
    layui.table.resize('ID-table-demo-theads-2');
  }
}}">
  <textarea>
<p>常用两级表头：</p>
<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}" id="ID-table-demo-theads-1">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}" rowspan="2"></th>
      <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
      <th lay-data="{align:'center'}" colspan="3">地址</th>
      <th lay-data="{field:'amount'}" rowspan="2">数量</th>
      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#templet-demo-theads-tool'}" rowspan="2">操作</th>
    </tr>
    <tr>
      <th lay-data="{field:'province', width:100}">省</th>
      <th lay-data="{field:'city', width:100}">市</th>
      <th lay-data="{field:'zone', width:100}">区</th>
    </tr>
  </thead>
</table>
<p>更多级表头（支持无限极）：</p>
<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=3', cellMinWidth: 80, page: true}" id="ID-table-demo-theads-2">
  <thead>
    <tr>
      <th lay-data="{field:'username', fixed:'left', width:80}" rowspan="3">联系人</th>
      <th lay-data="{field:'amount'}" rowspan="3">数量</th>
      <th lay-data="{align:'center'}" colspan="5">地址1</th>
      <th lay-data="{align:'center'}" colspan="2">地址2</th>
      <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#templet-demo-theads-tool'}" rowspan="3">操作</th>
    </tr>
    <tr>
      <th lay-data="{field:'province'}" rowspan="2">省</th>
      <th lay-data="{field:'city'}" rowspan="2">市</th>
      <th lay-data="{align:'center'}" colspan="3">详细</th>
      <th lay-data="{field:'province'}" rowspan="2">省</th>
      <th lay-data="{field:'city'}" rowspan="2">市</th>
    </tr>
    <tr>
      <th lay-data="{field:'street'}" rowspan="2">街道</th>
      <th lay-data="{field:'address'}">小区</th>
      <th lay-data="{field:'house'}">单元</th>
    </tr>
  </thead>
</table>
<script type="text/html" id="templet-demo-theads-tool">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
  </div>
</script>
<!-- import layui -->
  </textarea>
</pre>
<h3 id="more-examples" class="ws-anchor ws-bold">更多示例</h3>
<blockquote class="layui-elem-quote">
<ul>
<li><a href="https://gitee.com/layui/layui/issues/I5JBUE">🎉 分享：在 table 组件中使用 select/dropdown/laydate 等组件实现多样化编辑</a></li>
<li>不定期分享在 <a href="https://gitee.com/layui/layui/issues">Gitee Issues</a></li>
</ul>
</blockquote class="layui-elem-quote">

</div>
<h2 id="api" lay-toc="{bold: true, hot: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var table = layui.table</td>
<td>获得 <code>table</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#set">table.set(options)</a></td>
<td>设定全局默认属性项。</td>
</tr>
<tr>
<td><a href="index.html#render">table.render(options)</a></td>
<td>table 组件渲染，核心方法。</td>
</tr>
<tr>
<td><a href="index.html#table.init">table.init(filter, options)</a></td>
<td>初始化渲染静态表格。</td>
</tr>
<tr>
<td><a href="index.html#table.reload">table.reload(id, options, deep)</a></td>
<td>表格完整重载。</td>
</tr>
<tr>
<td><a href="index.html#table.reloadData">table.reloadData(id, options, deep)</a> <sup>2.7+</sup></td>
<td>表格数据重载。</td>
</tr>
<tr>
<td><a href="index.html#table.renderData">table.renderData(id)</a> <sup>2.8.5+</sup></td>
<td>重新渲染数据。</td>
</tr>
<tr>
<td><a href="index.html#table.checkStatus">table.checkStatus(id)</a></td>
<td>获取选中行相关数据。</td>
</tr>
<tr>
<td><a href="index.html#table.setRowChecked">table.setRowChecked(id, opts)</a> <sup>2.8+</sup></td>
<td>设置行选中状态。</td>
</tr>
<tr>
<td><a href="index.html#table.getData">table.getData(id)</a></td>
<td>获取当前页所有行表格数据。</td>
</tr>
<tr>
<td><a href="index.html#table.cache">table.cache</a></td>
<td>获取表格缓存数据集（包含特定字段）。</td>
</tr>
<tr>
<td><a href="index.html#table.resize">table.resize(id)</a></td>
<td>重置表格尺寸。</td>
</tr>
<tr>
<td><a href="index.html#table.exportFile">table.exportFile(id, data, opts)</a></td>
<td>导出表格数据到本地文件。</td>
</tr>
<tr>
<td><a href="index.html#table.getOptions">table.getOptions(id)</a> <sup>2.8+</sup></td>
<td>获取表格实例配置项。</td>
</tr>
<tr>
<td><a href="index.html#table.hideCol">table.hideCol(id, cols)</a> <sup>2.8+</sup></td>
<td>设置表格列的显示隐藏属性。</td>
</tr>
<tr>
<td><a href="index.html#table.on">table.on('event(filter)', callback)</a></td>
<td>table 相关事件。</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="set" class="ws-anchor ws-bold">全局设置</h3>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法主要用于初始化设置属性默认值。实际应用时，必须先设置该方法，再执行渲染、重载等操作。</p>
<pre><code class="layui-code language-js">layui.use(function(){
  var table = layui.table;
  // 全局设置
  table.set({
    headers: {token: '123'}
  });
  // 渲染
  table.render(options);
});
</code></pre>
<h3 id="render" lay-toc="{level: 2}" class="ws-anchor ws-bold">渲染</h3>
<p>table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。</p>
<table class="layui-table">
<thead>
<tr>
<th>渲染方式</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#table.render">方法配置渲染</a></td>
<td>通过 table 组件提供的核心方法 <code>table.render(options)</code> 完成的渲染。<sup>推荐</sup></td>
</tr>
<tr>
<td><a href="index.html#view-render">模板配置渲染</a></td>
<td>通过 <code>&lt;table&gt;</code> 标签的 <code>lay-options=&quot;{}&quot;</code> 属性定义模板，组件自动对其进行解析并完成渲染。</td>
</tr>
<tr>
<td><a href="index.html#table.init">静态表格渲染</a></td>
<td>对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。</td>
</tr>
</tbody>
</table class="layui-table">
<h4 id="table.render" lay-pid="render" class="ws-anchor ws-bold">方法配置渲染</h4>
<p><code>table.render(options);</code></p>
<ul>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法返回当前实例对象，包含可操作当前表格的一些成员方法。</p>
<pre><code class="layui-code language-html">&lt;table id=&quot;test&quot;&gt;&lt;/table&gt;
 
&lt;!-- import layui --&gt;
&lt;script&gt;
layui.use(function(){
  var table = layui.table;
  
  // 渲染，并获得实例对象
  var inst = table.render({
    elem: '#test', // 绑定元素选择器
    // 其他属性
    // …
  });
 
  // 实例对象成员
  inst.config; // 当前表格配置属性
  inst.reload(options, deep); // 对当前表格的完整重载。参数 deep 表示是否深度重载。
  inst.reloadData(options, deep); // 对当前表格的数据重载。参数 deep 同上。
  inst.resize(); // 对当前表格重新适配尺寸
  inst.setColsWidth() // 对当前表格重新分配列宽
})
&lt;/script&gt;
</code></pre>
<h4 id="view-render" lay-pid="render" class="ws-anchor ws-bold">模板配置渲染</h4>
<p>在 <code>&lt;table&gt;</code> 元素中直接书写 <code>lay-options=&quot;{}&quot;</code> 属性，组件将自动对其进行解析并完成渲染。</p>
<pre><code class="layui-code">&lt;!-- 此处 `lay-options` 定义基础属性 --&gt;
&lt;table class=&quot;layui-table&quot; lay-options=&quot;{url: ''}&quot; id=&quot;test&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;!-- 此处 `lay-options` 定义表头属性 --&gt;
      &lt;th lay-options=&quot;{field: 'title'}&quot;&gt;Title&lt;/th&gt; 
    &lt;/tr&gt;
  &lt;/thead&gt;
&lt;/table&gt;
</code></pre>
<blockquote class="layui-elem-quote">
<p>2.8 之前版本通过 <code>lay-data=&quot;{}&quot;</code> 定义属性配置项；<br>
2.8+ 版本推荐采用 <code>lay-options</code>，但同时兼容 <code>lay-data</code>。</p>
</blockquote class="layui-elem-quote">
<h4 id="table.init" lay-pid="render" class="ws-anchor ws-bold">静态表格渲染</h4>
<p><code>table.init(filter, options);</code></p>
<ul>
<li>参数 <code>filter</code> :  <code>&lt;table&gt;</code> 元素对应的 <code>lay-filter</code> 属性值</li>
<li>参数 <code>options</code> : 基础属性配置项。<a href="index.html#options">#详见属性</a></li>
</ul>
<p>该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件。<a href="index.html#demo-init">#参考相关示例</a></p>
<pre><code class="layui-code language-html">&lt;table lay-filter=&quot;test&quot;&gt;
  表格内容
&lt;/table&gt;
 
&lt;!-- import layui --&gt;
&lt;script&gt;
layui.use(function(){
  var table = layui.table;
  // 将静态表格进行动态化
  table.init('test', {
    height: 366,
    // 其他属性
    // …
  });
});
&lt;/script&gt;
</code></pre>
<h2 id="options-intro" lay-toc="{level: 2}">属性 🔥</h2>
<p>属性是指 table <em class="layui-text-em">渲染、重载</em> 时的配置选项（<code>options</code>），它本身是一个 <code>object</code> 参数。如：</p>
<pre><code class="layui-code">// 渲染
table.render({
  // options
  elem: '',
  cols: [[]],
  // …
}); 
// 重载
table.reload(id, {
  // options
});
       
若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（：
&lt;table lay-options=&quot;{url: ''}&quot;&gt; … &lt;/table&gt; 
</code></pre>
<p>table 的属性众多，我们大致分为以下几种：</p>
<table class="layui-table">
<thead>
<tr>
<th>属性类别</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#options">基础属性</a></td>
<td>-</td>
</tr>
<tr>
<td><a href="index.html#options.ajax">异步属性</a></td>
<td>用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。</td>
</tr>
<tr>
<td><a href="index.html#options.cols">表头属性</a></td>
<td>基础属性 <code>cols</code> 的子属性集。</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="options" lay-toc="{level: 3, hot: true}" class="ws-bold">基础属性</h3>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>elem</td>
<td>绑定原始 table 元素，方法渲染方式必填。</td>
<td>string/DOM</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.ajax">url</a></p>
</td>
<td>
<p>发送异步请求的 URL。更多异步相关属性见 : <a href="index.html#options.ajax">#异步属性</a></p>
</td>
<td>-</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.cols">cols</a></p>
</td>
<td>
<p>表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : <a href="index.html#options.cols">#表头属性</a></p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
      <td>data</td>
<td>
<p>直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 <code>url</code> 属性只能二选一。</p>
<hr>
<p><strong>注</strong>：当设置 <code>data</code> 模式时，<code>count</code> 的值取 <code>data.length</code>，即对一段已知数据进行分页展示。 此时在 <code>page</code> 属性中设置 <code>count</code> 无效。 若要在同一页显示所有数据，可将 <code>limit</code> 设置成 <code>data.length</code>，即与 <code>count</code> 等同即可，那么默认的分页栏只会显示 1 页，若要自定义分页结构，可通过 <code>pagebar</code> 属性结合 <code>laypage</code> 组件来重新自定义分页排版。</p>
</td>
      <td>array</td>
      <td>-</td>
    </tr>
    <tr>
      <td>id</td>
<td>
<p>设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 <code>elem</code> 属性绑定的原始 table 元素中的 <code>id</code> 属性值中获取。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>toolbar</td>
<td>
<p>开启表格头部工具栏。支持以下几种值写法：</p>
<ul>
<li><code>toolbar: '#template-id'</code>  自定义工具栏模板选择器</li>
<li><code>toolbar: '&lt;div&gt;xxx&lt;/div&gt;</code> 直接传入模板字符</li>
<li><code>toolbar: true</code> 仅开启工具栏右侧，不显示左侧模板</li>
<li><code>toolbar: 'default'</code> 开启工具栏并显示默认模板</li>
</ul>
</td>
<td>string<br>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>defaultToolbar</td>
<td>
<p>设置头部工具栏右侧图标。值是一个数组，可选成员有: <code>filter,exports,print</code> （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：<code>defaultToolbar: ['filter','print','exports']</code> <br>支持自定义图标及事件，用法详见示例: <a href="index.html#examples">#综合演示</a></p>
</td>
<td>array</td>
<td>-</td>
    </tr>
    <tr>
<td>width</td>
<td>设置容器宽度，默认自适应。</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.height">height</a></p>
</td>
<td>
<div class="ws-anchor" id="options.height">
  设置表格容器高度，默认自适应。其他可选值的规则如下：
</div>
<ul>
<li><code>height: 315</code> 设置固定高度</li>
<li><code>height: 'full-30'</code> 设置自适应高度。这是一个特定的语法格式：<code>full</code> 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部<em class="layui-text-em">加</em>表格底部距离页面最底部的“距离和”</li>
<li><code>height: '#id-30'</code> 设置相对父元素的高度自适应，其中 <code>#id</code> 即父元素的 ID 选择器，其计算原理和上述 <code>full</code> 相同。</li>
</ul>
</td>
<td>number<br>string</td>
<td>-</td>
    </tr>
    <tr>
<td>maxHeight <sup>2.8+</sup></td>
<td>
<p>设置表格容器的最大高度，设置该属性后，<code>height</code> 属性将被认定为默认的自适应值。</p>
</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>cellMinWidth</td>
<td>
<p>设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 <code>minWidth</code></p>
</td>
<td>number</td>
<td>
<p><code>60</code></p>
</td>
    </tr>
    <tr>
<td>cellMaxWidth <sup>2.8+</sup></td>
<td>
<p>设置所有普通单元格的最大宽度。其优先级低于表头属性中的 <code>maxWidth</code></p>
</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>lineStyle <sup>2.7+</sup></td>
<td>
<p>用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。<br>示例：<code>lineStyle: 'height: 95px;'</code></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>className <sup>2.7+</sup></td>
<td>用于给表格主容器追加 css 类名，以便更好地扩展表格样式</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>css <sup>2.7+</sup></td>
<td>
<p>用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：<code>css: '.layui-table-page{text-align: right;}'</code></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>escape <sup>2.6+</sup></td>
<td>是否开启对内容的编码（转义 html）</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>totalRow</td>
<td>是否开启合计行区域</td>
<td>string</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>page</td>
<td>
<p>用于开启分页。<br>
支持传入 <a href="../laypage/index.html#options">laypage</a> 组件的基础属性（jump,elem 除外）</p>
</td>
<td>boolean<br>object</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>pagebar <sup>2.7+</sup></td>
<td>
<p>用于开启分页区域的自定义模板，用法同 <code>toolbar</code> 属性。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>limit</td>
<td>
<p>每页显示的条数。值需对应 limits 参数的选项。优先级低于 <code>page</code> 属性中的 <code>limit</code> 属性。</p>
</td>
<td>number</td>
<td>
<p><code>10</code></p>
</td>
    </tr>
    <tr>
<td>limits</td>
<td>每页条数的选择项。</td>
<td>array</td>
<td>
<p><code>[10,…,90]</code></p>
</td>
    </tr>
    <tr>
<td>loading</td>
<td>
<p>是否显示加载条。若为 <code>false</code>，则在切换分页时，不会出现加载条。必须设置了 <code>url</code> 属性才生效。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>scrollPos <sup>2.7+</sup></td>
<td>
<p>用于设置重载数据或切换分页时的滚动条位置状态。可选值：</p>
<ul>
<li><code>fixed</code> 重载数据时，保持滚动条位置不变</li>
<li><code>reset</code> 重载数据时，滚动条位置恢复置顶</li>
<li><code>default</code> 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。</li>
</ul>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>editTrigger <sup>2.7+</sup></td>
<td>
<p>是用于设定单元格编辑的事件触发方式。如双击: <code>dblclick</code></p>
</td>
<td>string</td>
<td>
<p><code>click</code></p>
</td>
    </tr>
    <tr>
<td>title</td>
<td>定义 table 的大标题（在文件导出等地方会用到）</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>text</td>
<td>自定义文本，如空数据时的异常提示等。</td>
<td>object</td>
<td>
  <button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{title: 'text 属性默认值'}">
    查看默认值
  </button>
  <div style="display: none;">`text: {none: '无数据'}`</div>
</td>
    </tr>
    <tr>
<td>autoSort</td>
<td>
<p>是否由组件自动进行前端排序。若为 <code>false</code>，则需自主排序，即由后端直接返回排序好的数据。<a href="index.html#on-sort">#详细用法</a></p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>initSort</td>
<td>
<p>初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 <code>object</code> 类型的值，包含属性有：</p>
<ul>
<li><code>field</code> 排序字段。对应 <code>cols</code> 设定的各字段名</li>
<li><code>type</code> 排序方式。可选值 : <code>'asc','desc',null</code>，即：<code>升序、降序、默认</code></li>
</ul>
<pre><code class="layui-code">initSort: {
  field: 'id', // 按 id 字段排序
  type: 'desc' // 降序排序
}
</code></pre>
</td>
<td>object</td>
<td>-</td>
    </tr>
    <tr>
<td>skin</td>
<td>
<p>设置表格边框风格。可选值：<code>grid</code>|<code>line</code>|<code>row</code>|<code>nob</code></p>
</td>
<td>string</td>
<td>
<p><code>grid</code></p>
</td>
    </tr>
    <tr>
<td>size</td>
<td>
<p>设置表格其他尺寸。可选值：<code>sm</code>|<code>md</code>|<code>lg</code></p>
</td>
<td>string</td>
<td>
<p><code>md</code></p>
</td>
    </tr>
    <tr>
<td>even</td>
<td>
<p>是否开启隔行背景。</p>
</td>
<td>string</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>before <sup>2.7+</sup></td>
<td>数据渲染之前的回调函数。</td>
<td>function</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.done">done</a></p>
</td>
<td>
<div class="ws-anchor" id="options.done">
  数据渲染完毕的回调函数。返回的参数如下：
</div>
<pre><code class="layui-code">table.render({
  done: function(res, curr, count){
    console.log(res); // 得到当前渲染的数据
    console.log(curr);  // 得到当前页码
    console.log(count); // 得到数据总量
  }
  // …  // 其它属性
});
</code></pre>
</td>
<td>function</td>
<td>-</td>
    </tr>
    <tr>
<td>error <sup>2.6+</sup></td>
<td> 数据请求失败的回调函数。返回两个参数：错误对象、内容。</td>
<td>function</td>
<td>-</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="options.ajax" lay-toc="{level: 3, hot: true}" class="ws-bold">异步属性</h3>
<p>异步属性本质也是基础属性，当开启 <code>url</code> 属性时才有效，由于相关属性成员较多，所以单独提取介绍。</p>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>url</td>
<td>
<p>发送异步请求的 URL。默认会自动传递两个参数：<code>?page=1&amp;limit=30</code>（该参数可通过 <code>request</code> 属性自定义）
<br><code>page</code> 代表当前页码、<code>limit</code> 代表每页数据条数。</p>
</td>
    </tr>
    <tr>
<td>method</td>
<td>
<p>请求的方式，默认：<code>get</code></p>
</td>
    </tr>
    <tr>
<td>where</td>
<td>
<p>请求的其他参数。如：<code>where: {token: 'sasasas', id: 123}</code></p>
</td>
    </tr>
    <tr>
<td>headers</td>
<td>
<p>请求的数据头参数。如：<code>headers: {token: 'sasasas'}</code></p>
</td>
    </tr>
    <tr>
<td>contentType</td>
<td>
<p>请求的内容编码类型。若要发送 <code>json</code> 内容，可设置：<br>
<code>contentType: 'application/json'</code></p>
</td>
    </tr>
    <tr>
<td>dataType <sup>2.7+</sup></td>
<td>
<p>请求的数据类型，默认 <code>json</code>。</p>
</td>
    </tr>
    <tr>
<td>jsonpCallback <sup>2.7+</sup></td>
<td>
<p>设置当 <code>dataType: 'jsonp'</code> 时的回调函数名。</p>
</td>
    </tr>
    <tr>
<td>request</td>
<td>
<p>用于对默认的分页相关的请求参数 <code>page,limit</code> 重新设定名称。如：</p>
<pre><code class="layui-code">request: {
  pageName: 'curr', // 页码的参数名称，默认：page
  limitName: 'nums' // 每页数据条数的参数名，默认：limit
}
</code></pre>
<p>那么请求数据时的参数将会变为 <code>?curr=1&amp;nums=30</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#options.parseData"><strong>parseData</strong></a></p>
</td>
<td>
<div class="ws-anchor" id="options.parseData">
  数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式：
</div>
<pre><code class="layui-code">{
  &quot;code&quot;: 0,
  &quot;msg&quot;: &quot;&quot;,
  &quot;count&quot;: 1000,
  &quot;data&quot;: [{}, {}]
} 
</code></pre>
<p>很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：</p>
<pre><code class="layui-code">{
  &quot;status&quot;: 0,
  &quot;message&quot;: &quot;&quot;, 
  &quot;total&quot;: 180, 
  &quot;data&quot;: {
    &quot;item&quot;: [{}, {}]
  }
}
</code></pre>
<p>此时我们可以借助 <code>parseData</code> 回调函数将数据解析并转换为默认规定的格式：</p>
<pre><code class="layui-code">table.render({
  elem: '',
  url: '',
  parseData: function(res){ // res 即为原始返回的数据
    return {
      &quot;code&quot;: res.status, // 解析接口状态
      &quot;msg&quot;: res.message, // 解析提示文本
      &quot;count&quot;: res.total, // 解析数据长度
      &quot;data&quot;: res.data.item // 解析数据列表
    };
  },
  // … //其他参数
}); 
</code></pre>
<p>该函数非常实用</p>
</td>
    </tr>
  </tbody>
</table>
<h4 id="data.reserved" class="ws-anchor ws-bold">返回数据中的特定字段</h4>
<p>在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。</p>
<table class="layui-table">
<thead>
<tr>
<th>特定字段名</th>
<th>描述</th>
<th>读写状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>LAY_CHECKED</td>
<td>当前行的选中状态</td>
<td>可读可写</td>
</tr>
<tr>
<td>LAY_DISABLED</td>
<td>当前行是否禁止选择</td>
<td>可读可写</td>
</tr>
<tr>
<td>LAY_INDEX</td>
<td>当前行下标。每页重新从零开始计算</td>
<td>只读</td>
</tr>
<tr>
<td>LAY_NUM</td>
<td>当前行序号</td>
<td>只读</td>
</tr>
<tr>
<td>LAY_COL</td>
<td>当前列的表头属性配置项</td>
<td>只读</td>
</tr>
</tbody>
</table class="layui-table">
<p>示例一: 在返回的数据中设置特定字段：</p>
<pre><code class="layui-code">{
  &quot;code&quot;: 0,
  &quot;count&quot;: 1000,
  &quot;data&quot;: [{},{
    LAY_DISABLED: true
  }]
}
</code></pre>
<p>示例二: 在模板中读取特定字段示例：</p>
<p></p>
<pre><code class="layui-code">&lt;script type=&quot;text/html&quot; id=&quot;TPL-demo-xxx&quot;&gt;
  当前行下标: {{= d.LAY_INDEX }} 
  当前列的某个表头属性:  {{= d.LAY_COL.field }}
&lt;/script&gt;
</code></pre>
<p></p>

</div>
<h3 id="options.cols" lay-toc="{level: 3, hot: true}" class="ws-bold">表头属性</h3>
<p>表头属性是基础属性 <code>cols</code> 的子集，其使用频率甚至超过基础属性本身。</p>
<div>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col>
    <col width="100">
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th>属性名</th>
      <th>描述</th>
      <th>类型</th>
      <th>默认值</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
<td>field</td>
<td>
<p>设置字段名。通常是表格数据列的唯一标识</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>title</td>
<td>
<p>设置列的标题。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>fieldTitle <sup>2.8+</sup></td>
<td>
<p>设置列的字段标题。该属性在筛选列和导出场景中优先级高于 <code>title</code> 属性</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>width</td>
<td>
<p>设置列宽。若不填写，则自动分配；若填写，则支持值为：<em class="layui-text-em">数字、百分比</em>。如：
<code>width: 200</code> / <code>width: '30%'</code></p>
</td>
<td>number/string</td>
<td>-</td>
    </tr>
    <tr>
<td>minWidth</td>
<td>
<p>设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的 <code>cellMinWidth</code></p>
</td>
<td>number</td>
<td>
<p><code>60</code></p>
</td>
    </tr>
    <tr>
<td>maxWidth <sup>2.8+</sup></td>
<td>
<p>设置当前列的最大宽度。其优先级高于基础属性中的 <code>cellMaxWidth</code></p>
</td>
<td>number</td>
<td>-</td>
    </tr>
    <tr>
<td>type</td>
<td>
<p>设置列类型。可选值有：</p>
<ul>
<li><code>normal</code> 常规列，无需设定</li>
<li><code>checkbox</code> 复选框列</li>
<li><code>radio</code> 单选框列</li>
<li><code>numbers</code> 序号列</li>
<li><code>space</code> 空列</li>
</ul>
</td>
<td>string</td>
<td>
<p><code>normal</code></p>
</td>
    </tr>
    <tr>
<td>LAY_CHECKED</td>
<td>
<p>设置全选状态，当列设置 <code>type: 'checkbox'</code> 时才有效。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>fixed</td>
<td>
<p>设置固定列，即不跟随 table 横向滚动条而滚动。可选值有：</p>
<ul>
<li><code>left</code> 固定在左</li>
<li><code>right</code> 固定在右</li>
</ul>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#cols.templet">templet</a></p>
</td>
<td colspan="3">
<div class="ws-anchor" id="cols.templet">
  设置列的自定义模板，核心属性。模板遵循 <a href="../laytpl/index.html" target="_blank">laytpl</a> 组件语法。
</div>
<p><code>templet</code> 提供了三种使用方式，选择任一用法即可：</p>
<ul>
<li><strong>设置模版选择器</strong></li>
</ul>
<p></p>
<pre><code class="layui-code">&lt;script type=&quot;text/html&quot; id=&quot;TPL-demo-title&quot;&gt;
  &lt;a href=&quot;/detail/{{= d.id }}&quot; class=&quot;layui-table-link&quot;&gt;
    {{= d.title }} 
  &lt;/a&gt;
&lt;/script&gt;
 
&lt;!-- 
模板中的 `d` 不仅包含当前行数据，还包含特定字段，如：
{{= d.LAY_INDEX }} {{= d.LAY_COL }} 等 
--&gt;
</code></pre>
<pre><code class="layui-code">table.render({
  cols: [[
    {field: 'title', templet: '#TPL-demo-title'}
    // …
  ]],
  // …
});
</code></pre>
<p></p>
<ul>
<li><strong>设置模板内容</strong></li>
</ul>
<p>该方式必须在内容中包裹一层 <code>&lt;div&gt;&lt;/div&gt;</code>，否则无法读取模板。</p>
<p></p>
<pre><code class="layui-code">table.render({
  cols: [[
    {field: 'title', templet: '&lt;div&gt;&lt;a href=&quot;/detail/{{= d.id }}&quot; class=&quot;layui-table-link&quot;&gt;{{= d.title }}&lt;/a&gt;&lt;/div&gt;'}
    // …
  ]],
  // …
});
</code></pre>
<p></p>
<ul>
<li><strong>设置模板函数</strong></li>
</ul>
<p>函数将返回一个 <code>d</code> 参数，包含当前行数据及特定的额外字段。</p>
<pre><code class="layui-code">table.render({
  cols: [[
    {field: 'title', templet: function(d){
      console.log(d); // 得到当前行数据
      console.log(this); // 得到表头当前列配置项
      console.log(d.LAY_NUM); // 得到序号。或其他特定字段
      
      // 返回模板内容
      return '&lt;a href=&quot;/detail/'+ d.id +'&quot; class=&quot;layui-table-link&quot;&gt;'+ d.title +'&lt;/a&gt;'
    }}
    // …
  ]],
  // …
});
</code></pre>
</td>
    </tr>
    <tr>
<td>exportTemplet <sup>2.6.9+</sup></td>
<td>
<div class="ws-anchor" id="cols.exportTemplet">
<p>设置表格导出时的模板，用法同 <code>templet</code> 属性。当 <code>templet</code> 指向的模板内容较复杂时建议使用，如下以模板存在 <code>select</code> 元素为例：</p>
</div>
<pre><code class="layui-code">exportTemplet: function(d, obj){
  // 当前 td
  var td = obj.td(this.field);
  // 返回 select 选中值
  return td.find('select').val();
}
</code></pre>
</td>
<td>string<br>function</td>
<td>-</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#cols.totalRow">totalRow</a></p>
</td>
<td>
<div class="ws-anchor" id="cols.totalRow">
  是否开启该列的自动合计功能。 
</div>
<ul>
<li>前端合计</li>
</ul>
<pre><code class="layui-code">totalRow: true // 开启合计行，并默认对当前所有行数据进行前端合计
</code></pre>
<ul>
<li>后端合计</li>
</ul>
<p>前端合计的数据有限，因此常常需要后端直接返回合计行结果，此时将优先读取后端的合计行返回结果，其格式如下：</p>
<pre><code class="layui-code">{
  &quot;code&quot;: 0,
  &quot;totalRow&quot;: {
    &quot;score&quot;: &quot;777&quot;,
    &quot;experience&quot;: &quot;999&quot;
  },
  &quot;data&quot;: [{}, {}],
  &quot;msg&quot;: &quot;&quot;,
  &quot;count&quot;: 1000
}
</code></pre>
<p>如上，在 <code>totalRow</code> 中返回所需统计的列字段名和值即可。
<br><code>totalRow</code> 字段同样可以通过 <code>parseData</code> 回调来解析成为 table 组件所规定的数据格式。</p>
<ul>
<li>合计行模板</li>
</ul>
<p></p>
<pre><code class="layui-code">totalRow: '{{= d.TOTAL_NUMS }} 单位' // 还比如只取整：'{{= parseInt(d.TOTAL_NUMS) }}'
</code></pre>
<p></p>
</td>
<td>boolean<br>string</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>
<p><a href="index.html#cols.edit">edit</a></p>
</td>
<td>
<div class="ws-anchor" id="cols.edit">
  用于对列所在的单元格开启编辑功能。可选值有：
</div>
<ul>
<li><code>edit: 'text'</code> 单行输入模式</li>
<li><code>edit: 'textarea'</code> 多行输入模式 <sup>2.7+</sup></li>
</ul>
<p><strong>函数写法</strong> <sup>2.7+</sup></p>
<pre><code class="layui-code">edit: function(d){
  // d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限
  if(d.editable){ // editable 为任意字段名
    return 'text'; // 编辑模式
  }
}
</code></pre>
</td>
<td>string<br>function</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>hide</td>
<td>
<p>是否初始隐藏列</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>ignoreExport <sup>2.8.3+</sup></td>
<td>
<p>是否导出时忽略该列</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>escape</td>
<td>
<p>是否对当前列进行内容编码（转义 html），优先级大于基础属性中的 <code>escape</code>。</p>
</td>
<td>boolean</td>
<td>
<p><code>true</code></p>
</td>
    </tr>
    <tr>
<td>sort</td>
<td>
<p>是否开启列的排序功能。<br>
注意：<em>不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序排序计算中</em>，如：<code>'张三' &gt; '2' &gt; '100'</code>，这可能并不是你想要的结果，但字典序排列采用的是 <code>ASCII</code> 码比对。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>unresize</td>
<td>
<p>是否禁用拖拽列宽。默认情况下会根据列类型 <code>type</code> 属性来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。</p>
</td>
<td>boolean</td>
<td>
<p><code>false</code></p>
</td>
    </tr>
    <tr>
<td>event</td>
<td>
<p>自定义单元格点击事件名，以便在 <a href="index.html#on-tool">单元格工具事件</a> 中完成对该单元格的事件处理。</p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>style</td>
<td>
<p>自定义单元格样式。可传入任意的 CSS 内容，如：<code>style: 'font-size: 13px; color: red;'</code></p>
</td>
<td>string</td>
<td>-</td>
    </tr>
    <tr>
<td>align</td>
<td>
<p>单元格排列方式。可选值有：<code>left</code> | <code>center</code> | <code>right</code></p>
</td>
<td>string</td>
<td>
<p><code>left</code></p>
</td>
    </tr>
    <tr>
<td>colspan</td>
<td>
<p>单元格所占列数。一般用于多级表头</p>
</td>
<td>number</td>
<td>
<p><code>1</code></p>
</td>
    </tr>
    <tr>
<td>rowspan</td>
<td>
<p>单元格所占行数。一般用于多级表头</p>
</td>
<td>number</td>
<td>
<p><code>1</code></p>
</td>
    </tr>
  </tbody>
</table>
</div>
<h3 id="reload" lay-toc="{level: 2}" class="ws-anchor ws-bold">重载</h3>
<p>即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式：</p>
<table class="layui-table">
<thead>
<tr>
<th>重载方式</th>
<th>API</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#table.reload">完整重载</a></td>
<td><a href="index.html#table.reload">table.reload(id, options, deep)</a></td>
</tr>
<tr>
<td><a href="index.html#table.reloadData">仅数据重载</a></td>
<td><a href="index.html#table.reloadData">table.reloadData(id, options, deep)</a></td>
</tr>
</tbody>
</table class="layui-table">
<p>重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。</p>
<h4 id="table.reload" lay-pid="reload" class="ws-anchor ws-bold">完整重载</h4>
<p><code>table.reload(id, options, deep);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>options</code> : 为基础属性配置项</li>
<li>参数 <code>deep</code> <sup>2.6+</sup> : 是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。<div style="margin-top:5px;"><button type="button" class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{content: '#DOCS-table-reload-comp'}">2.6 之前版本的 <code>table.reload()</code> 方法兼容性说明</button></div></li>
</ul>
<div style="display: none;" id="DOCS-table-reload-comp">
  <div class="layui-text">
    <p>由于 2.6 之前的版本是采用深度重载，所以如果您之前利用了该机制，那么升级 Layui 时，需通过以下任一方式进行相应的兼容性适配：</p>
    <strong>方法一：</strong>
    <p>追加参数兼容：<pre><code>table.reload(id, options, true);</code></pre></p>
    <strong>方法二：</strong>
    <p>方法重写兼容。将以下代码放入您的公共 JS 代码中</p>
    <pre><code>// 对 2.6 之前版本的 table.reload() 方法兼容
var tableReload = table.reload;
table.reload = function(){
  var args = [];
  layui.each(arguments, function(index, item){
    args.push(item);
  });
  args[2] === undefined && (args[2] = true);
  return tableReload.apply(null, args);
}; </code></pre>
  </div>
</div>
<p>该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 完整重载 -  所有属性属性(options)均可参与到重载中
table.reload('test', {
  where: { // 传递数据异步请求时携带的字段
    aaa: '111',
    bbb: '222'
    //…
  },
  height: 1000 // 重设高度
});
</code></pre>
<h4 id="table.reloadData" lay-pid="reload" class="ws-anchor ws-bold">仅数据重载 <sup>2.7+</sup></h4>
<p><code>table.reloadData(id, options, deep);</code></p>
<ul>
<li>参数同 <code>table.reload(id, options, deep)</code> 参数</li>
</ul>
<p>该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 数据重载 - 仅与数据相关的属性(options)能参与到重载中
table.reloadData('test', {
  where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
  scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
  // …
  height: 2000 // 高度  --- 属性设置无效，因不属于数据相关属性
});
</code></pre>
<h3 id="table.renderData" lay-pid="api" class="ws-anchor ws-bold">重新渲染数据 <sup>2.8.5+</sup></h3>
<p><code>table.renderData(id);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于重新渲染数据，一般在修改 <code>table.cache</code> 后使用。</p>
<pre><code class="layui-code language-js">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取当前实例的数据缓存
var data = table.cache['test'];
// 获取某行数据，并从 data 中移除该行
var item = data.splice(index, 1) // index 为当前行下标，一般可在事件中通过 obj.index 得到
// 将某行数据移动到另外某行
data.splice(newIndex, 0, item[0]);
// 根据 table.cache 重新渲染数据
table.renderData('test');
</code></pre>
<h3 id="table.checkStatus" lay-pid="api" class="ws-anchor ws-bold">获取选中行</h3>
<p><code>table.checkStatus(id);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于获取表格当前选中行相关数据</p>
<pre><code class="layui-code language-js">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取选中行相关数据
var tableStatus = table.checkStatus('test');
console.log(checkStatus.data) // 选中行的数据
console.log(checkStatus.data.length) // 选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) // 表格是否全选
</code></pre>
<h3 id="table.setRowChecked" lay-pid="api" class="ws-anchor ws-bold">设置行选中状态 <sup>2.8+</sup></h3>
<p><code>table.setRowChecked(id, opts);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>opts</code> : 设置行选中时的可选属性，详见下表</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>opts</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>选中方式。可选值: <code>checkbox,radio</code></td>
<td>string</td>
<td><code>checkbox</code></td>
</tr>
<tr>
<td>index</td>
<td>选中行的下标。即数据的所在数组下标（<code>0</code> 开头）。<br>可设置 <code>all</code> 表示全选。</td>
<td>number<br>string</td>
<td>-</td>
</tr>
<tr>
<td>checked</td>
<td>选中状态值。 <ul><li>若传递该属性，则赋值固定值。</li><li>若不传递该属性（默认），则 <code>checkbox</code> 将在 <code>true|false</code> 中自动切换值，而 <code>radio</code> 将赋值 <code>true</code> 固定值。<sup>2.8.4+</sup></li></ul></td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>selectedStyle</td>
<td>是否仅设置样式状态。若为 <code>true</code> 则只标注选中样式，不对数据中的 <code>LAY_CHECKED</code> 属性赋值。</td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法用于设置行的选中样式及相关的特定属性值 <code>LAY_CHECKED</code>。</p>
<pre><code class="layui-code language-js">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
 
// 设置某行选中
table.setRowChecked('test', {
  index: 0, // 选中行的下标。 0 表示第一行
});
// 取消选中行
table.setRowChecked('test', {
  index: 'all', // 所有行
  checked: false
});
</code></pre>
<h3 id="table.getData" lay-pid="api" class="ws-anchor ws-bold">获取当前页接口数据</h3>
<p><code>table.getData(id);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于获取表格当前页的数据，它对应的是接口返回的原始数据，不包含 table 组件内部的特定字段。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取当前页接口数据
var data = table.getData('test');
console.log(data);
</code></pre>
<h3 id="table.cache" lay-pid="api" class="ws-anchor ws-bold">获取表格缓存数据集</h3>
<p><code>var tableCache = table.cache;</code></p>
<p><code>table.cache</code> 是一段存储当前页表格所有实例的当前页的临时数据，通过 id 作为索引，它包含接口返回的原始数据和组件内部的特定字段。 使用该静态属性可对表格数据进行<em class="layui-text-em">读写</em>操作。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取对应 table 的临时数据
var thisCache = table.cache['test'] || {};
 
// 变更对应 table 的临时数据中的某个字段值
thisCache.fieldName = 123;
</code></pre>
<h3 id="table.resize" lay-pid="api" class="ws-anchor ws-bold">重置尺寸</h3>
<p><code>table.resize(id);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于重置表格尺寸和结构，其内部完成了<em class="layui-text-em">固定列高度平铺、动态分配列宽、容器滚动条宽高补丁</em> 等适配。它一般用于修复特殊情况下导致的列宽适配异常（如浏览器窗口尺寸改变导致的表格父容器宽度变化），以保证表格尺寸依旧能友好展示。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 重置对应 table 的尺寸，一般写在表格外部容器宽高发生变化后的段落
table.resize('test');
</code></pre>
<h3 id="table.exportFile" lay-pid="api" class="ws-anchor ws-bold">导出数据</h3>
<p><code>table.exportFile(id, data, opts);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> <strong>或</strong> 要导出的数据表头（当 <code>id</code> 为 <code>array</code> 类型时）。</li>
<li>参数 <code>data</code> : 要导出的自定义数据，参数可选。</li>
<li>参数 <code>opts</code> <sup>2.7+</sup>: 导出数据时的属性可选项，支持： <code>type,title</code>。</li>
</ul>
<p>该方法用于外部导出对应 table 的数据和任意自定义数据。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 外部导出对应 table 的数据
table.exportFile('test');
 
// 导出自定义数据
table.exportFile(['名字','性别','年龄'], [
  ['张三','男','20'],
  ['李四','女','18'],
  ['王五','女','19']
], {
  type: 'csv', // 导出的文件格式，支持: csv,xls
  title: '导出的文件标题'
}); 
</code></pre>
<h3 id="table.getOptions" lay-pid="api" class="ws-anchor ws-bold">获取配置项 <sup>2.8+</sup></h3>
<p><code>table.getOptions(id);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
</ul>
<p>该方法用于外部获取对应 table 实例的属性配置项。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 获取配置项
var thisOptions = table.getOptions('test');
console.log(thisOptions);
</code></pre>
<h3 id="table.hideCol" lay-pid="api" class="ws-anchor ws-bold">设置列显示或隐藏 <sup>2.8+</sup></h3>
<p><code>table.hideCol(id, cols);</code></p>
<ul>
<li>参数 <code>id</code> : table 渲染时的 <code>id</code> 属性值</li>
<li>参数 <code>cols</code> : 设置列（表头）显示或隐藏状态</li>
</ul>
<p>该方法用于外部设置对应 table 列的显示与隐藏状态。</p>
<pre><code class="layui-code">// 渲染
table.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 索引
  // 其他属性 …
});
// 设置对应列的显示或隐藏
table.hideCol('test', {
  field: 'title', // 对应表头的 field 属性值
  hide: true // `true` or `false`
});
// 同时设置多列的显示或隐藏
table.hideCol('test', [{
  field: 'title1',
  hide: true
}, {
  field: 'title2',
  hide: false
}, {
  field: 'title3',
  hide: false
}]);
// 显示或隐藏全部列
table.hideCol('test', false); // `true` or `false`
</code></pre>
<h2 id="table.on" lay-toc="{hot: true}">事件</h2>
<p><code>table.on('event(filter)', callback);</code></p>
<ul>
<li>参数 <code>event(filter)</code> 是事件的特定结构。 <code>event</code> 为事件名，支持的事件见下表。<code>filter</code> 为元素属性 <code>lay-filter</code> 对应的值。</li>
<li>参数 <code>callback</code> 为事件执行时的回调函数，并返回一个包含各项成员的 <code>object</code> 类型的参数。</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>event</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="index.html#on-toolbar">toolbar</a></td>
<td>头部工具栏事件</td>
</tr>
<tr>
<td><a href="index.html#on-sort">sort</a></td>
<td>排序切换事件</td>
</tr>
<tr>
<td><a href="index.html#on-colResized">colResized</a> <sup>2.8+</sup></td>
<td>列拖拽宽度后的事件</td>
</tr>
<tr>
<td><a href="index.html#on-colToggled">colToggled</a> <sup>2.8+</sup></td>
<td>列筛选（显示或隐藏）后的事件</td>
</tr>
<tr>
<td><a href="index.html#on-row">row / rowDouble</a></td>
<td>行单击和双击事件</td>
</tr>
<tr>
<td><a href="index.html#on-rowContextmenu">rowContextmenu</a> <sup>2.8+</sup></td>
<td>行右键菜单事件</td>
</tr>
<tr>
<td><a href="index.html#on-edit">edit</a></td>
<td>单元格编辑事件</td>
</tr>
<tr>
<td><a href="index.html#on-tool">tool / toolDouble</a> 🔥</td>
<td>单元格工具事件。可在该事件中实现行的更新与删除操作。</td>
</tr>
<tr>
<td><a href="index.html#on-checkbox">checkbox</a></td>
<td>复选框事件</td>
</tr>
<tr>
<td><a href="index.html#on-radio">radio</a></td>
<td>单选框事件</td>
</tr>
<tr>
<td><a href="index.html#on-pagebar">pagebar</a> <sup>2.7+</sup></td>
<td>尾部分页栏事件</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="on-toolbar" lay-pid="table.on" class="ws-anchor ws-bold">头部工具栏事件</h3>
<p><code>table.on('toolbar(filter)', callback);</code></p>
<p>点击头部工具栏区域设定了属性为 <code>lay-event=&quot;&quot;</code> 的元素时触发。如：</p>
<pre><code class="layui-code language-html">&lt;!-- 原始容器 --&gt;
&lt;table id=&quot;test&quot; lay-filter=&quot;test&quot;&gt;&lt;/table&gt;
 
&lt;!-- 工具栏模板 --&gt;
&lt;script type=&quot;text/html&quot; id=&quot;toolbarDemo&quot;&gt;
  &lt;div class=&quot;layui-btn-container&quot;&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;add&quot;&gt;添加&lt;/button&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;delete&quot;&gt;删除&lt;/button&gt;
    &lt;button class=&quot;layui-btn layui-btn-sm&quot; lay-event=&quot;update&quot;&gt;编辑&lt;/button&gt;
  &lt;/div&gt;
&lt;/script&gt;
 
&lt;!-- import layui --&gt;
&lt;script&gt;
layui.use(function(){
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#test',
    toolbar: '#toolbarDemo',
    // … // 其他属性
  });
   
  // 头部工具栏事件
  table.on('toolbar(test)', function(obj){
    var options = obj.config; // 获取当前表格属性配置项
    var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
    console.log(obj); // 查看对象所有成员
    
    // 根据不同的事件名进行相应的操作
    switch(obj.event){ // 对应模板元素中的 lay-event 属性值
      case 'add':
        layer.msg('添加');
      break;
      case 'delete':
        layer.msg('删除');
      break;
      case 'update':
        layer.msg('编辑');
      break;
    };
  });
});
&lt;/script&gt;
</code></pre>
<h3 id="on-sort" lay-pid="table.on" class="ws-anchor ws-bold">排序切换事件</h3>
<p><code>table.on('sort(filter)', callback);</code></p>
<p>点击表头排序时触发，它通常在设置 <code>autoSort: false </code> 基础属性时使用，以呈现后端的排序，而不是默认的前端排序。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({
  elem: '#test',
  autoSort: false, // 禁用前端自动排序。
  // … // 其他属性
});
 
// 触发排序事件 
table.on('sort(test)', function(obj){
  console.log(obj.field); // 当前排序的字段名
  console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  console.log(this); // 当前排序的 th 对象
 
  // 尽管我们的 table 自带排序功能，但并没有请求服务端。
  // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
  table.reload('test', {
    initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
    where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
      field: obj.field, // 排序字段
      order: obj.type // 排序方式
    }
  });
});
</code></pre>
<h3 id="on-colResized" lay-pid="table.on" class="ws-anchor ws-bold">列拖拽宽度后的事件 <sup>2.8+</sup></h3>
<p><code>table.on('colResized(filter)', callback);</code></p>
<p>在表头列分割线拖拽宽度后触发。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 列拖拽宽度后的事件
table.on('colResized(test)', function(obj){
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});
</code></pre>
<h3 id="on-colToggled" lay-pid="table.on" class="ws-anchor ws-bold">列筛选（显示或隐藏）后的事件 <sup>2.8+</sup></h3>
<p><code>table.on('colToggled(filter)', callback);</code></p>
<p>点击头部工具栏右上角的字段筛选列表时触发。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 列筛选（显示或隐藏）后的事件
table.on('colToggled(test)', function(obj){
  var col = obj.col; // 获取当前列属性配置项
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
});
</code></pre>
<h3 id="on-row" lay-pid="table.on" class="ws-anchor ws-bold">行单击和双击事件</h3>
<ul>
<li>行单击事件：<code>table.on('row(filter)', callback);</code></li>
<li>行双击事件：<code>table.on('rowDouble(filter)', callback);</code></li>
</ul>
<p>单击或双击 table 行任意区域触发，两者用法相同。<br>
注<sup>2.8.4+</sup>：在 table 模板中或任意内部元素中设置 <code>lay-unrow</code> 属性，可阻止该元素执行 <code>row</code> 事件</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 渲染
table.render({
  elem: '#test',
  // … // 其他属性
});
 
// 行单击事件
table.on('row(test)', function(obj){
  var data = obj.data; // 得到当前行数据
  var index = obj.index; // 得到当前行索引
  var tr = obj.tr; // 得到当前行 &lt;tr&gt; 元素的 jQuery 对象
  var options = obj.config; // 获取当前表格基础属性配置项
  console.log(obj); // 查看对象所有成员
  
  // obj.del() // 删除当前行
  // obj.update(fields, related);  // 修改行数据
  // obj.setRowChecked(opts); // 设置行选中状态
});
</code></pre>
<h3 id="on-rowContextmenu" lay-pid="table.on" class="ws-anchor ws-bold">行右键菜单事件  <sup>2.8+</sup></h3>
<p><code>table.on('rowContextmenu(filter)', callback);</code></p>
<p>右键单击行时触发。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['code', 'preview'], tools: ['full'], toolsEvent: function(oi, type){
  if(type === 'full'){
    layui.table.resize('ID-table-onrowContextmenu');
  }
}}">
  <textarea>
<table class="layui-hide" id="ID-table-onrowContextmenu"></table>
<!-- import layui -->
<script>
layui.use(['table', 'dropdown', 'util'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  var util = layui.util;
   
  // 渲染
  table.render({
    elem: '#ID-table-onrowContextmenu',
    defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
    url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    page: true,
    cols: [[
      {field:'id', title:'ID', width:80, fixed: 'left', unresize: true},
      {field:'username', title:'用户', width:120},
      {field:'sex', title:'性别', width:80},
      {field:'city', title:'城市', width:100},
      {field:'sign', title:'签名'},
      {field:'experience', title:'积分', width:80, sort: true}
    ]],
  });
   
  // 行单击事件
  table.on('rowContextmenu(ID-table-onrowContextmenu)', function(obj){
    var data = obj.data; // 得到当前行数据
    var index = obj.index; // 得到当前行索引
    var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
    var options = obj.config; // 获取当前表格基础属性配置项
    // console.log(obj); // 查看对象所有成员
    
    // 右键操作
    dropdown.render({
      trigger: 'contextmenu',
      show: true,
      data: [
        {title: 'Menu item 1', id: 'AAA'},
        {title: 'Menu item 2', id: 'BBB'}
      ],
      click: function(menuData, othis) {
        // 显示选中的相关数据 - 仅用于演示
        layer.alert(util.escape(JSON.stringify({
          dropdown: menuData,
          table: obj.data
        })));
      }
    });
    
    // obj.del() // 删除当前行
    // obj.update(fields, related);  // 修改行数据
    obj.setRowChecked({selectedStyle: true}); // 标注行选中状态样式
  });
});
</script>
  </textarea>
</pre>
<h3 id="on-edit" lay-pid="table.on" class="ws-anchor ws-bold">单元格编辑事件</h3>
<p><code>table.on('edit(filter)', callback);</code></p>
<p>单元格被编辑，且值发生改变时触发。</p>
<pre><code class="layui-code language-js">var table = layui.table;
var layer = layui.layer;
 
// 单元格编辑事件
table.on('edit(test)', function(obj){
  var field = obj.field; // 得到修改的字段
  var value = obj.value // 得到修改后的值
  var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
  var data = obj.data // 得到所在行所有键值
  var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增
  console.log(obj); // 查看对象所有成员
  
  // 值的校验
  if(value.replace(/\s/g, '') === ''){
    layer.tips('值不能为空', this, {tips: 1});
    return obj.reedit(); // 重新编辑 -- v2.8.0 新增
  }
  // 编辑后续操作，如提交更新请求，以完成真实的数据更新
  // …
  
  // 更新当前缓存数据
  var update = {};
  update[field] = value;
  obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
});
</code></pre>
<h3 id="on-tool" lay-pid="table.on" class="ws-anchor ws-bold">单元格工具事件</h3>
<ul>
<li>单元格工具事件「单击触发」： <code>table.on('tool(filter)', callback);</code></li>
<li>单元格工具事件「双击触发」： <code>table.on('toolDouble(filter)', callback);</code></li>
</ul>
<p>单击或双击单元格中带有 <code>lay-event=&quot;&quot;</code> 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。</p>
<p></p>
<pre><code class="layui-code language-html">&lt;!-- 表头某列 templet 属性指向的模板 --&gt;
&lt;script type=&quot;text/html&quot; id=&quot;toolEventDemo&quot;&gt;
  &lt;a class=&quot;layui-btn layui-btn-xs&quot; lay-event=&quot;detail&quot;&gt;查看&lt;/a&gt;
  &lt;a class=&quot;layui-btn layui-btn-xs&quot; lay-event=&quot;edit&quot;&gt;编辑&lt;/a&gt;
  &lt;a class=&quot;layui-btn layui-btn-danger layui-btn-xs&quot; lay-event=&quot;del&quot;&gt;删除&lt;/a&gt;
  
  &lt;!-- 支持任意的 laytpl 组件语法，如： --&gt;
  {{#  if(d.auth &gt; 2){ }}
    &lt;a class=&quot;layui-btn layui-btn-xs&quot; lay-event=&quot;check&quot;&gt;审核&lt;/a&gt;
  {{#  } }}
&lt;/script&gt;
 
&lt;table id=&quot;test&quot; lay-filter=&quot;test&quot;&gt;&lt;/table&gt; 
 
&lt;!-- import layui --&gt;
&lt;script&gt;
layui.use(function(){
  var table = layui.table;
  // 渲染
  table.render({
    elem: '#test',
    cols: [[
      {title: '操作', width: 200, templet: '#toolEventDemo'}
    ]]
    // … // 其他属性
  });
  // 单元格工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data; // 得到当前行数据
    var index = obj.index; // 得到当前行索引
    var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
    var tr = obj.tr; // 得到当前行 &lt;tr&gt; 元素的 jQuery 对象
    var options = obj.config; // 获取当前表格基础属性配置项
    var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
    console.log(obj); // 查看对象所有成员
    
    // 根据 lay-event 的值执行不同操作
    if(layEvent === 'detail'){ //查看
      // do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('确定删除吗？', function(index){
        obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
        layer.close(index);
        
        // 向后端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
        /*
        table.reloadData(id, {
          scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
        });
        */
      });
    } else if(layEvent === 'edit'){ //编辑
      // do something
      
      // 同步更新缓存对应的值
      // 该方法仅为前端层面的临时更新，在实际业务中需提交后端请求完成真实的数据更新。
      obj.update({
        username: '123',
        title: 'abc'
      }); 
      // 若需更新其他包含自定义模板并可能存在关联的列视图，可在第二个参数传入 true
      obj.update({
        username: '123'
      }, true); // 注：参数二传入 true 功能为 v2.7.4 新增
   
      // 当发送后端请求成功后，可再通过 reloadData 方法完成数据重载
      /*
      table.reloadData(id, {
        scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
      });
      */
    }
  });
});
&lt;/script&gt; 
</code></pre>
<p></p>
<h3 id="on-checkbox" lay-pid="table.on" class="ws-anchor ws-bold">复选框事件</h3>
<p><code>table.on('checkbox(filter)', callback);</code></p>
<p>当 table 开启复选框，且点击复选框时触发。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 复选框事件
table.on('checkbox(test)', function(obj){
  console.log(obj); // 查看对象所有成员
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
  console.log(obj.type); // 若触发的是全选，则为：all；若触发的是单选，则为：one
});
</code></pre>
<h3 id="on-radio" lay-pid="table.on" class="ws-anchor ws-bold">单选框事件</h3>
<p><code>table.on('radio(filter)', callback);</code></p>
<p>当 table 开启单选框，且点击单选框时触发。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 单选框事件
table.on('radio(test)', function(obj){
  console.log(obj); // 当前行的一些常用操作集合
  console.log(obj.checked); // 当前是否选中状态
  console.log(obj.data); // 选中行的相关数据
});
</code></pre>
<h3 id="on-pagebar" lay-pid="table.on" class="ws-anchor ws-bold">尾部分页栏事件 <sup>2.7+</sup></h3>
<p><code>table.on('pagebar(filter)', callback);</code></p>
<p>点击尾部分页栏自定义模板中属性为 <code>lay-event=&quot;&quot;</code> 的元素时触发。用法跟 toolbar 完全一致。</p>
<pre><code class="layui-code language-js">var table = layui.table;
 
// 渲染
table.render({
  elem: '#demo',
  pagebar: '#pagebarDemo' // 分页栏模板所在的选择器
  // … // 其他参数
});
 
// 分页栏事件
table.on('pagebar(test)', function(obj){
  console.log(obj); // 查看对象所有成员
  console.log(obj.config); // 当前实例的配置信息
  console.log(obj.event); // 属性 lay-event 对应的值
});
</code></pre>
<h2>小贴士</h2>
<p>若表头数量太多及每页呈现的数据量太大，为了性能考虑，建议采用 <a href="index.html#demo-static">静态表格</a> 渲染，配合 <a href="../laypage/index.html#options">laypage</a> 组件实现分页。</p>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/table/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>